<script setup>
import { ref, computed } from 'vue'
import VideoListItem from './VideoListItem.vue'

const props = defineProps({
  folderId: {
    type: String,
    required: true
  },
  folderData: {
    type: Object,
    required: true
  },
  currentVideo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['select-video'])

// 跟踪子文件夹的折叠状态
const collapsedFolders = ref({})

// 切换文件夹折叠状态
const toggleFolder = (folderName) => {
  collapsedFolders.value[folderName] = !collapsedFolders.value[folderName]
}

// 检查文件夹是否折叠
const isFolderCollapsed = (folderName) => {
  return collapsedFolders.value[folderName] === true
}

// 处理视频选择
const handleVideoSelect = (video, subfolder = null) => {
  // 如果视频来自子文件夹，添加子文件夹信息到视频对象
  if (subfolder) {
    // 创建一个新的视频对象，包含子文件夹信息
    const videoWithSubfolderInfo = {
      ...video,
      subfolder_name: subfolder.folder_name,  // 子文件夹名称
      parent_folder: props.folderId,         // 父文件夹ID
      is_subfolder: true                     // 标记为子文件夹视频
    }
    emit('select-video', videoWithSubfolderInfo)
  } else {
    // 常规视频，直接传递
    emit('select-video', video)
  }
}

// 检查当前视频是否被选中
const isVideoActive = (video) => {
  return props.currentVideo && 
    ((video.video_name && props.currentVideo.video_name === video.video_name) ||
     (video.id && props.currentVideo.id === video.id))
}
</script>

<template>
  <div class="video-list-section">
    <h2>播放列表 - {{ folderData.folder_name }}</h2>
    <div class="video-list">
      <!-- 当前文件夹的视频 -->
      <div v-if="folderData.videos && folderData.videos.length > 0" class="video-section">
        <h3 v-if="folderData.subfolders && folderData.subfolders.length > 0">视频</h3>
        <VideoListItem
          v-for="video in folderData.videos"
          :key="video.video_name"
          :title="video.video_name"
          :is-active="isVideoActive(video)"
          @select="() => handleVideoSelect(video)"
        />
      </div>
      
      <!-- 子文件夹 -->
      <div v-if="folderData.subfolders && folderData.subfolders.length > 0" class="subfolder-section">
        <h3>子文件夹</h3>
        <div v-for="subfolder in folderData.subfolders" :key="subfolder.folder_name" class="subfolder">
          <!-- 子文件夹标题 -->
          <div class="subfolder-header" @click="toggleFolder(subfolder.folder_name)">
            <span class="folder-icon">📁</span>
            <span class="folder-name">{{ subfolder.folder_name }}</span>
            <span class="folder-count">{{ subfolder.videoCount || (subfolder.videos && subfolder.videos.length) || 0 }}个视频</span>
            <span class="folder-toggle">{{ isFolderCollapsed(subfolder.folder_name) ? '▶' : '▼' }}</span>
          </div>
          
          <!-- 子文件夹内容 -->
          <div v-if="!isFolderCollapsed(subfolder.folder_name)" class="subfolder-content">
            <VideoListItem
              v-for="video in subfolder.videos"
              :key="video.video_name"
              :title="video.video_name"
              :is-active="isVideoActive(video)"
              @select="() => handleVideoSelect(video, subfolder)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.video-list-section {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px var(--card-shadow);
  width: 100%; /* 确保整个列表区域宽度固定 */
  box-sizing: border-box; /* 确保padding不会增加元素实际宽度 */
}

.video-list-section h2 {
  margin: 0 0 10px;
  color: var(--text-color);
  font-size: 1.25rem;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden; /* 防止水平滚动 */
  padding-bottom: 5px;
  width: 100%; /* 确保宽度固定 */
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box; /* 确保padding不会增加元素实际宽度 */
}

.video-section, .subfolder-section {
  margin-bottom: 0.5rem;
}

.video-section h3, .subfolder-section h3 {
  margin: 0.25rem 0;
  font-size: 1rem;
  color: var(--text-color);
  opacity: 0.8;
}

.subfolder {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  width: 100%; /* 确保子文件夹宽度固定 */
}

.subfolder-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--subfolder-header-bg, rgba(66, 184, 131, 0.2)); /* 增加背景不透明度，提高对比度 */
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--text-color);
  width: 100%; /* 确保宽度固定 */
  box-sizing: border-box; /* 确保padding不会增加元素实际宽度 */
}

.subfolder-header:hover {
  background-color: var(--subfolder-header-hover-bg, rgba(66, 184, 131, 0.3)); /* 增加hover状态的不透明度 */
}

.folder-icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: var(--folder-icon-color, #42b883);
}

.folder-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-color);
}

.folder-count {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-color-secondary, rgba(var(--text-color-rgb, 0, 0, 0), 0.8)); /* 增加文本不透明度，提高对比度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 防止溢出 */
  text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}

.folder-toggle {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  color: var(--folder-toggle-color, #42b883);
}

.subfolder-content {
  padding: 0.25rem;
  background-color: var(--subfolder-content-bg, var(--card-bg));
  border-top: 1px solid var(--border-color);
  width: 100%; /* 确保内容宽度固定 */
  box-sizing: border-box; /* 确保padding不会增加元素实际宽度 */
}

/* 滚动条样式 */
.video-list::-webkit-scrollbar {
  width: 4px; /* 从6px减小到4px，使滚动条更细 */
  height: 4px;
}

.video-list::-webkit-scrollbar-track {
  background: var(--card-bg);
  border-radius: 2px; /* 从3px减小到2px，与更细的滚动条匹配 */
}

.video-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg, rgba(var(--text-color-rgb, 0, 0, 0), 0.3));
  border-radius: 2px; /* 从3px减小到2px，与更细的滚动条匹配 */
}

.video-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg, rgba(var(--text-color-rgb, 0, 0, 0), 0.5));
}
</style>